<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a {
				overflow: hidden;
				font-size: 20px;
				height: 20px;
				line-height: 20px;
				white-space: nowrap;
				background-color: hotpink;
				animation: da 8s steps(15) forwards;
				/* 注意写了steps属性就不要再写 ease */
			}
			@keyframes da{
				from{
					width: 0;
					}
				to{
					width: 300px;
				}
			}
		</style>
	</head>
	<body>
		<div>动画的速度曲线里有一个steps属性,它使用来控制动画完成步长</div>
		<h2>动画效果可以实现各种效果  需要多使用，多了解</h2>
		<div class="a">我只是一个单纯的打字机效果演示</div>
	</body>
</html>
